<template>
  <div>
    <div>
      <input type="text" v-model="user.id">
      <input type="text" v-model="user.name">
      <button @click="addItem">提交</button>
    </div>
    <ul>
      <li v-for="item in state.arr" :key="item.id" @click="handleDelete(item.id)">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue'
const useDeleteItem = () => {
  const state = reactive({
    arr: [
      {
        id: 0,
        name: 'ifer',
      },
      {
        id: 1,
        name: 'elser',
      },
      {
        id: 2,
        name: 'xxx',
      },
    ],
  })
  const handleDelete = (id) => {
    const idx = state.arr.findIndex(item => item.id === id)
    state.arr.splice(idx, 1)
  }
  return { state, handleDelete }
}
const useAddItem = (state) => {
  const user = reactive({
    id: '',
    name: ''
  })
  const addItem = () => {
    state.arr.push({
      ...user
    })
    user.id = ''
    user.name = ''
  }
  return { user, addItem }
}
export default {
  setup() {
    const { state, handleDelete } = useDeleteItem()
    const { user, addItem } = useAddItem(state)
    return {
      state,
      handleDelete,
      user,
      addItem
    }
  }
}
</script>

<style lang="scss" scoped></style>